<!DOCTYPE html>
<html>
<head>
    <title>发药</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../../Css/bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="../../Css/bootstrap-responsive.css"/>
    <link rel="stylesheet" type="text/css" href="../../Css/style.css"/>
    <script type="text/javascript" src="../../Js/jquery.js"></script>
    <script type="text/javascript" src="../../Js/bootstrap.js"></script>
    <script type="text/javascript" src="../../Js/ckform.js"></script>
    <script type="text/javascript" src="../../Js/common.js"></script>

    <style type="text/css">
        body {
            padding-bottom: 40px;
        }

        .sidebar-nav {
            padding: 9px 0;
        }

        @media (max-width: 980px) {
            /* Enable use of floated navbar text */
            .navbar-text.pull-right {
                float: none;
                padding-left: 5px;
                padding-right: 5px;
            }
        }
    </style>
</head>
<body>

<form action="#" method="post" class="definewidth m20">
    <table class="table table-bordered table-hover definewidth m10">
        <tr>
            <td width="10%" class="tableleft">病人号：</td>
            <td><input type="text" name="pname" value=""/></td>
        </tr>
        <tr>
            <td colspan="2">
                <center>
                    <button class="btn btn-primary" type="button" id="query">查询</button>
                    <button class="btn btn-primary" type="reset">清空</button>
                </center>
            </td>
        </tr>
    </table>
</form>

<table class="table table-bordered table-hover definewidth m10">
    <thead>
        <tr>
            <th><input type="checkbox" id="checkall" onChange="checkall();"></th>
            <th>病人号</th>
            <th>姓名</th>
            <th>负责人</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody id="tbody">

    </tbody>
</table>

<table class="table table-bordered table-hover definewidth m10">
    <tr>
        <th width="120px">
            <div>
                <button type="button" class="btn btn-success" id="newNav">开药</button>
            </div>
        </th>

        <th style="text-align: right;">

            <nav aria-label="Page navigation" style="display: inline-block; padding-right: 30px;">
                <label style="font-size: 14px; margin-bottom:0; vertical-align: 10px">
                    总&nbsp;<span id="total"></span>&nbsp;条数&nbsp;&nbsp;
                </label>
                <ul class="pagination" style="margin: 0;" id="page">

                    <li>
                        <a href="#" aria-label="Previous" id="prePage">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <!--<li><a href="#">1</a></li>-->
                    <!--<li><a href="#">2</a></li>-->
                    <!--<li><a href="#">3</a></li>-->
                    <!--<li><a href="#">4</a></li>-->
                    <!--<li><a href="#">5</a></li>-->
                    <li>
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true" id="nextPage">&raquo;</span>
                        </a>
                    </li>

                </ul>
            </nav>

        </th>

    </tr>
</table>
</body>
<script type="text/javascript">

    String.prototype.GetValue= function(para) {
        let reg = new RegExp("(^|&)"+ para +"=([^&]*)(&|$)");
        let r = this.substr(this.indexOf("\?")+1).match(reg);
        if (r!=null) return unescape(r[2]); return null;
    }

    let url = document.location.toString();
    let pageNum=url.GetValue("pageNum");

    $(function () {

        loadPage(pageNum);

        // 约束查询
        $('#query').click(function (){
            loadPage();
        });

        // 发药
        $('#newNav').click(function () {
            sendDrugs();
        });

    });

    //批量发药操作
    function sendDrugs() {
        // 提取选中 tr中 的参数信息 装进数组容器
        //    提取信息有: 病人 、病人id
        let ch = $("input[name='check']");
        let selectedId = [],selectedName = [];
        for (let i = 0; i < ch.length ; i++) {
            if(ch[i].checked === true){
                selectedId.push($(ch[i]).parent().next().html());
                selectedName.push($(ch[i]).parent().next().next().html());
            }
        }

        // 参数序列化
        pageNum = pageNum == null? 1 : pageNum;
        let str = "pageNum=" + pageNum;
        $.each(selectedName, function(k, v) {
            str += "&" + selectedId[k] + "=" + v;
        });

        // console.log("dispensing-gives.html?"+str);
        if(confirm("对 "+selectedName+" 病人进行开药？")){
            window.location.href = "dispensing-gives.html?"+str;
        }
    }

    //列表全选
    function checkall() {
        var alls = document.getElementsByName("check");
        var ch = document.getElementById("checkall");
        if (ch.checked) {
            for (var i = 0; i < alls.length; i++) {
                alls[i].checked = true;
            }
        } else {
            for (var i = 0; i < alls.length; i++) {
                alls[i].checked = false;
            }
        }
    }

    /** 全选控制
     *  解决全选可能出现的情况：
     *      if1：一个未选，则取消全选
     *      if2：全部选中，则选中全选
     */
    function subselectAll() {
        var all = $("#checkall");
        var childs = $("input[name='check']");
        for (var i = 0; i < childs.length; i++) {
            if ($(childs[i]).prop("checked") == false) {
                all.prop("checked",false);
                return false;
            }
        }
        all.prop("checked", true);
        return true;
    }

    //
    function delAll() {
        var alls = document.getElementsByName("check");
        var ids = new Array();
        for (var i = 0; i < alls.length; i++) {
            if (alls[i].checked) {
                ids.push(alls[i].value);
            }
        }
        if (ids.length > 0) {
            if (confirm("确认操作?")) {
                alert("成功!");
            }
        } else {
            alert("请选中要操作的项");
        }
    }

    // <td><input type="checkbox" name="check" value="1"></td>
    // <td>1103</td>
    // <td>黄飞鸿</td>
    // <td>胡一得</td>
    // <td>
    //     <a href="dispensing-give.html">发药</a>&nbsp;&nbsp;&nbsp;
    //     <a href="dispensing-look.html">详情...</a>
    // </td>
    
    // 列表加载
    function loadPage(pageNum) {

        let peopleId = $("input[name='pname']").val();

        $.ajax({
            type: "GET",
            url: "/behospital/list",
            data: {peopleId:peopleId,pageNum:pageNum},
            dataType:"json",
            success: function(vo){
                let list=vo.pageInfo.list;
                let pageNum =vo.pageInfo.pageNum;
                let str="";
                for(let i=0;i<list.length;i++){
                    let obj=list[i];
                    let behId = obj.behId;
                    let behName = obj.behName;
                    let behNursepeople = obj.behNursepeople;
                    str +=
                        "<tr>"+
                        "   <td><input type='checkbox' name='check' onclick='subselectAll()'></td>" +
                        "   <td name='"+behId+"'>"+behId+"</td>" +
                        "   <td name='"+behName+"'>"+behName+"</td>" +
                        "   <td name='"+behNursepeople+"'>"+behNursepeople+"</td>" +
                        "   <td>" +
                        "       <a href='dispensing-give.html?pageNum="+pageNum+"&behId="+behId+"'>开药</a>&nbsp;&nbsp;&nbsp;" +
                        "       <a href='dispensing-look.html?pageNum="+pageNum+"&behId="+behId+"'>详情...</a>" +
                        "   </td>"+
                        "</tr>";
                }
                $("#tbody").html(str);
                //填充分页数据
                fillPageData(vo.pageInfo);
            }
        });

    }

    function pageUrl(pageNum){
        //page 事件 跳转
        window.location.href = "dispensing.html?pageNum="+pageNum;
    }

    function fillPageData(pageInfo){
        // 翻页组件
        $("#total").html(pageInfo.total);

        let pageLiList = "";
        for (let i = 1 ; i <= pageInfo.navigateLastPage ; i++) {
            // 当前页高亮
            if (pageInfo.pageNum === i) {
                pageLiList += "<li class='active'><a href='javascript:void(0)' name='"+i+"' >"+i+"</a></li>";
            }else{
                pageLiList += "<li><a href='javascript:pageUrl("+i+")' name='"+i+"' >"+i+"</a></li>";
            }
        }

        let pageLiPre =
            "<li>\n" +
            "    <a href='javascript:pageUrl("+pageInfo.prePage+")' aria-label=\"Previous\" name='"+pageInfo.prePage+"' id='prePage' >\n" +
            "        <span aria-hidden=\"true\">&laquo;</span>\n" +
            "    </a>\n" +
            "</li>";
        let pageLiNext =
            "<li>\n" +
            "<a href='javascript:pageUrl("+pageInfo.nextPage+")' aria-label=\"Next\" name='"+pageInfo.nextPage+"' id='nextPage'>\n" +
            "    <span aria-hidden=\"true\">&raquo;</span>\n" +
            "</a>\n" +
            "</li>";

        $("#page").html(pageLiPre + pageLiList + pageLiNext);

        //约束 按钮 以防越界 (休眠1s 以防出错)
        setTimeout(constraintBtn(pageInfo), 1000);
    }

    function constraintBtn(pageInfo){
        // 分页列表翻页约束

        //如果是第一页：上一页和首页禁用
        if (pageInfo.isFirstPage){
            let firstNode = $("#page>li:first");
            firstNode.addClass("disabled");
            firstNode.find("a").attr("href","javascript:void(0)");
            firstNode.next().find("a").attr("href","javascript:void(0)");
        }
        //如果已经是最后一页：下一页和末页禁用
        if(pageInfo.isLastPage) {
            let lastNode = $("#page>li:last");
            lastNode.addClass("disabled");
            lastNode.find("a").attr("href","javascript:void(0)");
        }
    }


</script>
</html>
